<template>
    <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) in slideImages" :key="index">
            <img src="../assets/image/ban1.jpg" alt="">
        </swiper-slide>
        <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
    </swiper>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOption: {
        autoplay: {
          //自动播放
          delay: 4000,
          disableOnInteraction: false
        }

        //   pagination: {//分页
        //     el: '.swiper-pagination',
        //      clickable: true,
        //      renderBullet(index, className) {//自定义分页的按钮
        //        return `<span class="${className} swiper-pagination-bullet-custom"></span>`
        //      }
        //  },
      },
      slideImages: [
        "../assets/image/ban1.jpg",
        "../assets/image/ban1.jpg",
        "../assets/image/ban1.jpg"
      ]
    };
  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>



<style lang="less" scoped>
.swiper {
  width: 100vw;
  height: 500px;
}
.swiper-slide {
  width: 100vw;
  height: 600px;
}
.swiper-slide img {
  width: 100vw;
  height: 600px;
}
</style>
